﻿.fab-box { position: fixed; display: flex; justify-content: center; align-items: center; z-index: 2;
    &.top { width: 30px; height: 30px; right: 15px; bottom: 90px; border: 1px #5989b9 solid; background: #6699cc; border-radius: 5px; color: #fff; transition: all 0.3; opacity: 0; }
    &.active { opacity: 1; }
    &.fab { z-index: 10;
        &.leftBottom { left: 15px; bottom: 90px; }
        &.leftTop { left: 15px; top: 40px; top: calc(40px + var(--window-top)); }
        &.rightBottom { right: 15px; bottom: 90px; }
        &.rightTop { right: 15px; top: 40px; top: calc(40px + var(--window-top)); }
    }
}
.fab-circle { display: flex; justify-content: center; align-items: center; position: absolute; width: 45px; height: 45px; background: #3c3e49; border-radius: 50%; box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2); z-index: 11;
    &.left { left: 0; }
    &.right { right: 0; }
    &.top { top: 0; }
    &.bottom { bottom: 0; }
    .icon-jia { color: #ffffff; font-size: 25px; transition: all 0.3s; width: 22px; height: 22px;
        &.active { transform: rotate(90deg); }
    }
}
.fab-content { background: #6699cc; box-sizing: border-box; display: flex; border-radius: 50px; overflow: hidden; box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1); transition: all 0.2s; width: 55px;
    &.left { justify-content: flex-start; }
    &.right { justify-content: flex-end; }
    &.flexDirection { flex-direction: column; justify-content: flex-end; }
    &.flexDirectionStart { flex-direction: column; justify-content: flex-start; }
    &.flexDirectionEnd { flex-direction: column; justify-content: flex-end; }
    .fab-item { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 45px; height: 45px; font-size: 12px; color: #fff; opacity: 0; transition: opacity 0.2s;
        &.active { opacity: 1; }
        .content-image { width: 30px; height: 30px; margin-bottom: 5px; }
        &.first { width: 55px; }
    }
}
